<template>
	<view>
		<u-skeleton rows="5" avatar :loading="loading" :title="false" :animate="true">
			<!-- 第一行 头像昵称 -->
			<view class="account-info" style="display: flex;flex-direction: row;align-items: center;padding: 10px;">
				<u-avatar :src="user_info.usertx" bg-color="#fff"></u-avatar>
				<view class="account-name" style="margin-left: 10upx;">{{ user_info.nickname }}</view>
			</view>
			<view class="account_info_list">
				<!-- 标题 -->
				<view class="account_info_list_title">账号安全</view>
				<!-- 列表 -->
				<view class="account_info_list_item">
					<view class="account_info_list_item_left">
						<view class="account_info_list_item_name">密码</view>
						<view class="account_info_list_item_content">已设置</view>
					</view>
					<view class="account_info_list_item_right">
						<u-button type="success" text="修改密码" :plain="true" shape="circle" @click="passwordshow = true"></u-button>
					</view>
				</view>
				<view class="account_info_list_item">
					<view class="account_info_list_item_left">
						<view class="account_info_list_item_name">手机号</view>
						<view class="account_info_list_item_content">{{ user_info.mobile == '' ? "未绑定" : user_info.mobile }}</view>
					</view>
					<view class="account_info_list_item_right">
						<u-button type="success" v-if="user_info.mobile != ''" text="换绑手机" :plain="true" shape="circle" @click="update_userbing_info(0)"></u-button>
						<u-button type="success" v-else text="绑定手机" :plain="true" shape="circle" @click="update_userbing_info(0)"></u-button>
					</view>
				</view>
				<view class="account_info_list_item">
					<view class="account_info_list_item_left">
						<view class="account_info_list_item_name">邮箱</view>
						<view class="account_info_list_item_content">{{ user_info.email == '' ? "未绑定" : user_info.email }}</view>
					</view>
					<view class="account_info_list_item_right">
						<u-button type="success" v-if="user_info.email == ''" text="绑定邮箱" :plain="true" shape="circle" @click="update_userbing_info(1)"></u-button>
						<u-button type="success" v-else text="换绑邮箱" :plain="true" shape="circle" @click="update_userbing_info(1)"></u-button>
					</view>
				</view>
			</view>
		</u-skeleton>
		<u-popup :show="show" :closeable="true" :closeOnClickOverlay="false" @close="show = false">
			<view class="update">
				<view class="update-item">
					<u--input :placeholder="placeholder" border="surround" v-model="value"></u--input>
				</view>
				<view class="update-item">
					<view class="update-item-list">
						<u--input placeholder="请输入验证码" border="surround" clearable v-model="code"></u--input>
						<view style="width: 25%;">
							<u-toast ref="uToast"></u-toast>
							<u-code seconds="60" ref="uCode" @change="codeChange" changeText="X秒"></u-code>
							<u-button :hairline="false" @tap="getCode">{{ tips }}</u-button>
						</view>
					</view>
				</view>
				<view>
					<u-button type="success" text="修改" @click="update_bing_info"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 修改密码 -->
		<u-popup :show="passwordshow" :closeable="true" :closeOnClickOverlay="false" @close="passwordshow = false">
			<view class="update">
				<view class="update-item">
					<u--input placeholder="请输入您的旧密码" border="surround" v-model="old_password"></u--input>
				</view>
				<view class="update-item">
					<u--input placeholder="请输入您的新密码" border="surround" v-model="new_password"></u--input>
				</view>
				<view>
					<u-button type="success" text="修改" @click="change_password"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			placeholder: '请输入邮箱',
			user_info: {},
			show: false,
			passwordshow: false,
			value: '',
			tips: '',
			code: '',
			code_type: 0,
			old_password: '',
			new_password: ''
		}
	},
	onLoad() {
		this.get_user_other_information();
	},
	methods: {
		async get_user_other_information() {
			let get_user_other_information = await this.$api.get_user_other_information({});
			if (get_user_other_information.code == 1) {
				this.user_info = get_user_other_information.data;
				this.loading = false;
			}
		},
		update_userbing_info(type) {
			if (type == 0) {
				this.placeholder = '请输入手机号';
			} else {
				this.placeholder = '请输入邮箱';
			}
			this.code_type = type;
			this.show = true;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				if (this.code_type == 0) {
					this.$api.get_mobile_verification_code({
						mobile: this.value,
						type: 4
					}).then((res) => {
						if (res.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.showToast({
								icon: 'error',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.hideLoading();
					}).catch((err) => {

						uni.showToast({
							icon: 'error',
							position: 'bottom',
							title: "系统错误，请稍后再试"
						});
						uni.hideLoading();
					})
				} else {
					this.$api.get_email_verification_code({
						email: this.value,
						type: 3
					}).then((res) => {
						if (res.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.showToast({
								icon: 'error',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.hideLoading();
					}).catch((err) => {

						uni.showToast({
							icon: 'error',
							position: 'bottom',
							title: "系统错误，请稍后再试"
						});
						uni.hideLoading();
					})
				}
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		update_bing_info() {
			if (this.code_type == 0) {
				this.modify_user_phone();
			} else {
				this.modify_user_email();
			}
		},
		// 修改邮箱
		modify_user_email() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$api.modify_user_email({
				email: this.value,
				code: this.code
			}).then((res) => {
				if (res.code == 1) {
					uni.$u.toast('修改成功');
					this.show = false;
					this.get_user_other_information();
				} else {
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: res.msg
					});
				}
			}).catch((err) => {
				uni.showToast({
					icon: 'error',
					position: 'bottom',
					title: "系统错误，请稍后再试"
				});
			})
		},
		// 修改手机号
		modify_user_phone() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$api.modify_user_phone({
				phone: this.value,
				code: this.code
			}).then((res) => {
				if (res.code == 1) {
					uni.$u.toast('修改成功');
					this.show = false;
					this.get_user_other_information();
				} else {
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: res.msg
					});
				}
			}).catch((err) => {
				uni.showToast({
					icon: 'error',
					position: 'bottom',
					title: "系统错误，请稍后再试"
				});
			})
		},
		change_password() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$api.change_password({
				password: this.old_password,
				new_password: this.new_password
			}).then((res) => {
				if (res.code == 1) {
					uni.$u.toast('修改成功');
					this.passwordshow = false;
				} else {
					uni.showToast({
						icon: 'error',
						position: 'bottom',
						title: res.msg
					});
				}
			}).catch((err) => {
				uni.showToast({
					icon: 'error',
					position: 'bottom',
					title: "系统错误，请稍后再试"
				});
			})
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #fff;
}

.account-info {
	display: flex;
	align-items: center;
	padding: 30upx 20upx;
	background-color: #E0E2E1;

	.account-name {
		margin-left: 20upx;
	}
}

.account_info_list {
	padding: 20upx;

	.account_info_list_title {
		font-size: 28upx;
		font-weight: bold;
		margin-bottom: 10upx;
	}

	.account_info_list_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;
		border-bottom: 1px solid #E0E2E1;

		.account_info_list_item_left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;

			.account_info_list_item_name {
				font-size: 28upx;
				color: #333;
			}

			.account_info_list_item_content {
				font-size: 24upx;
				color: #999;
			}
		}

		.account_info_list_item_right {
			font-size: 24upx;
			color: #999;
		}
	}
}

.update {
	padding: 80upx 20upx;

	.update-item {
		margin-bottom: 20upx;

		.update-item-list {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.u-input {
				margin-right: 10upx;
			}
		}
	}
}
</style>
